<template>
    <div class="silde_outer">
      <div class="swiper swiper-container" @touchstart.stop="_stopPropagation($event)">
        <div class="swiper-wrapper">
          <div
              :class="['swiper-slide', currentIndex == swiperList.indexOf(item) ? 'sel_slide' : '']"
              v-for="(item, index) in swiperList"
              :key="index"
              @click="changeConsultTab(item)"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div>
        <slot></slot>
      </div>
    </div>
</template>
<script setup>
import Swiper from "swiper";
import 'swiper/less';
import {ref, onMounted, watchEffect} from "vue";

const props = defineProps({
  swiperList: {
    type: Array,
    default: [],
  },
});
const emit = defineEmits(["handleChangeCurrentTab"]);

// 当前tabIndex
const currentIndex = ref(0);
const swiper = ref();

onMounted(() => {
  swiper.value = new Swiper(".swiper-container", {
    slidesPerView: "auto",
    freeMode: true,
    freeModeMomentumRatio: 0.5,
  });
})

// 切换tab
function changeConsultTab(item) {
  // console.log(item)
  currentIndex.value = props.swiperList.indexOf(item);
}

const stopWatch = watchEffect(() => {
  // 向父组件传参
  emit("handleChangeCurrentTab", props.swiperList[currentIndex.value]);
});


// 阻止冒泡事件
function _stopPropagation(e) {
  e.stopPropagation();
}
</script>
<style lang='less' scoped>
@headerHeight: 30px;
.silde_outer {
  position: relative;
  width: 100%;
  height: 100%;

  .swiper {
    width: 100%;
    height: @headerHeight;
    overflow: hidden;

    .swiper-wrapper {
      display: flex;
      align-items: center;

      .swiper-slide {
        text-align: center;
        font-size: 12px;
        height: 60%;
        width: auto;
        /* Center slide text vertically */
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 calc((10 / 1200) * 24rem);
        padding: 0 calc((15 / 1200) * 24rem);
        border-radius: calc((28 / 1200) * 24rem);
        cursor: pointer;
        user-select: none;
        color: #333333;
      }

      // 点击后的效果
      .sel_slide {
        color: #fff;
        background: linear-gradient(270deg, #3b7bfa 0%, #598ffd 100%);
        box-shadow: 0px calc((7 / 1200) * 24rem) calc((11 / 1200) * 24rem) 0px rgba(54, 129, 245, 0.45);
      }
    }
  }
}
</style>
